<template>
    <h3>reactive的浅层作用形式</h3>
    <h3>reactive要做到深层响应式需要在拦截get时返回reactive包装的代理对象即可深层响应式，shallowReactive只需返回原始对象，原始对象没有响应式</h3>
    <span>{{ foo }}</span>
    <el-button @click="handleClick">+</el-button>
</template>

<script setup>
import { shallowReactive } from "vue"

const foo = shallowReactive({
    counter: {
        c: 1
    }
})

const handleClick = () => {
    foo.counter.c += 1
}
</script>

<style lang="scss" scoped>
</style>